<template>
  <div class="audition13">
    <h3>1. 值的形式不行</h3>
    <p>Set：类似于数组的形式存在，里面直接包含了值</p>
    <code class="code">
      let s = new Set([1, 2, 3])
    </code>
    <p>Map：以数组的形式存在，但是值是键值对形式</p>
    <code class="code">
      let m = new Map([<br />
        <span class="indient">['hello', 'world'],</span><br />
        <span class="indient">['age', 18],</span><br />
        <span class="indient">['name', 'dilireba']</span><br />
      ])
    </code>
    <h3>2. 对象方法不同</h3>
    <p>Set的对象方法</p>
    <code class="code">
      // 增<br />
      s.add(值)<br />
      // 删<br />
      s.delete(值) // 删除某个值<br />
      s.clear() // 清空所有值<br />
      // 查<br />
      s.has(值)<br />
      // 值的个数<br />
      s.size
    </code>
    <p>Map的对象方法</p>
    <code class="code">
      // 增<br />
      m.set(k, v)<br />
      // 删<br />
      m.delete(k)<br />
      m.clear()<br />
      // 查<br />
      m.has(k)<br />
      m.get(k)<br />
      // 元素个数<br />
      m.size
    </code>
    <h3>3. 唯一性不同</h3>
    <p>Set是值唯一，不重复</p>
    <p>Map是键唯一，不重复</p>
    <h3>4. 迭代方法略有不同</h3>
    <p>Set迭代方式：</p>
    <p><span class="color">for val of s.values()</span></p>
    <p>或者values的别名keys : <span class="color">for val of s.keys()</span></p>
    <code class="code">
      let s = new Set([1, 2, 3, 4])<br />
      for(let val of s.values()) {<br />
        <span class="indient">console.log(val)</span><br />
      }<br />
      // 结果<br />
      1  2  3  4
    </code>
    <p><span class="color">s.forEach</span>该方法第一个参数表示s的值，第二个参数是可选的，用于重写回调内部的this</p>
    <code class="code">
      s.forEach((item, _this) => {<br />
        <span class="indient">console.log(itme, _this)</span><br />
      })<br />
      // 结果<br />
      1 1<br />
      2 2<br />
      3 3<br />
      4 4
    </code>
    <p>Map迭代方式</p>
    <p><span class="color">for pair of m.entries()</span></p>
    <code class="code">
      let m = new Map([<br />
        <span class="indient">['name', 'dilireba'],</span><br />
        <span class="indient">['age', 18],</span><br />
        <span class="indient">['like', 'sleep']</span><br />
      ])<br />
      for(let pair of m.entries()) {<br />
        <span class="indient">console.log(pair)</span><br />
      }<br />
      // 结果<br />
      ['name', 'dilireba']<br />
      ['age', 18]<br />
      ['like', 'sleep']
    </code>
    <p><span class="color">forEach</span>，第一个参数是键值对的值，第二个参数是键值对的键</p>
    <code class="code">
      m.forEach((val, key) => {<br />
        <span class="inient">console.log(val, key)</span><br />
      })<br />
      // 结果<br />
      'dilireba'  'name'<br />
      18  'age'<br />
      'sleep'  'like'
    </code>
    <p><span class="color">for key of m.keys()</span>用于遍历键</p>
    <code class="code">
      for(let key of m.keys()) {<br />
        <span class="indient">console.log(key)</span><br />
      }<br />
      // 结果<br />
      'name'<br />
      'age'<br />
      'like'
    </code>
    <p><span class="color">for val of m.values()</span>用于遍历值</p>
    <code class="code">
      for(let val of m.values()) {<br />
        <span class="indient">console.log(val)</span><br />
      }<br />
      // 结果<br />
      'dilireba'<br />
      18<br />
      'sleep'
    </code>
  </div>
</template>

<script>
export default {
  name: 'Audition13',
}
</script>

<style>

</style>